<template>
  <div class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
    <a-form
      ref="applyFormRef"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="applyRules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">经营信息</a-divider>
      <a-form-item label="选择产品类型" name="productType">
        <a-radio-group v-model:value="applymentDetailInfo.productType" @change="() => emit('itemRender')">
          <a-radio :value="1">当面付</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="经营类目" name="mccCode">
        <JeepayAliMccSelect v-model:value="applymentDetailInfo.mccCode" />
      </a-form-item>
  
      <a-form-item label="营业执照照片" name="licenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.licenseImg" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
      </a-form-item>
          
      <a-form-item label="营业执照编号" name="licenseNo">
        <a-input v-model:value.trim="applymentDetailInfo.licenseNo" />
      </a-form-item>

      <a-form-item class="jeepay-valid" label="营业执照有效期截止" name="licenseEffectEnd">
        <a-input v-model:value.trim="applymentDetailInfo.licenseEffectEnd" :disabled="applymentDetailInfo.licenseEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
        <a-checkbox :checked="applymentDetailInfo.licenseEffectEnd == '长期' " @change="(e) => applymentDetailInfo.licenseEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
      </a-form-item>

      <a-form-item label="特殊资质照" name="specialLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.specialLicenseImg" bizType="applyment" />
        <span style="font-size: smaller;color: crimson;">若所选经营类目需要其他资质，请在此处上传。</span>
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">店铺信息</a-divider>
      <a-form-item label="店铺名称全称" name="mchFullName">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
      </a-form-item>

      <a-form-item label="店铺地理位置选择省市县" name="areaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.areaCode" />
      </a-form-item>

      <a-form-item label="店铺详细地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.address" />
      </a-form-item>

      <a-form-item label="门头照" name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" bizType="applyment" />
      </a-form-item>

      <a-form-item label="店内环境照" name="storeInnerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeInnerImg" bizType="applyment" />
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">账号信息</a-divider>
      <a-form-item label="支付宝账号" name="accountNo">
        <a-input v-model:value.trim="applymentDetailInfo.accountNo" />
      </a-form-item>


      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">联系人信息</a-divider>
      <a-form-item label="联系人姓名" name="contactName">
        <a-input v-model:value.trim="applymentDetailInfo.contactName" />
      </a-form-item>

      <a-form-item label="联系人电话" name="contactPhone">
        <a-input v-model:value.trim="applymentDetailInfo.contactPhone" />
      </a-form-item>

      <a-form-item label="联系人邮箱" name="contactEmail">
        <a-input v-model:value.trim="applymentDetailInfo.contactEmail" />
      </a-form-item>


      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">产品费率</a-divider>

      <div label="配置费率" name="fee" style="width:100%;">
        <JeepayPaywayRatePanel 
          ref="jeepayPaywayRatePanelRef" 
          :configMode="configMode" 
          :infoId=" (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo" 
          :selectIfCode="mchApplymentData.ifCode" 
          onlyRate="true"
        />
      </div>
    </a-form>
  </div>
</template>
<script setup lang="ts">

import {toRaw, ref, reactive, nextTick, defineProps, defineEmits, onMounted, defineExpose, inject, getCurrentInstance} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'

const jeepayPaywayRatePanelRef = ref()

// 获取当前实例的代理对象
const { proxy } : any = getCurrentInstance()
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 接收父组件的进件详细参数
let applymentDetailInfoInject : any = inject('applymentDetailInfo')
let applymentDetailInfo : any = applymentDetailInfoInject.value
// 接收进件参数（包含 商户号， ifCode ）
let mchApplymentDataRef : any = inject('mchApplymentData')
let mchApplymentData : any = mchApplymentDataRef.value

// 参数注入： 配置方式
let configMode : any = inject('configMode')


const vdata : any = reactive({
  hideItem : [],
  payWayFee : '未设置'
})

// 默认为当面付
applymentDetailInfo.productType = 1

// 定义父组件的传值
const props = defineProps({
  readonly: { type: Boolean, default: true}, // 是否只读（当商户模式时需要只读， 默认只展示服务商开启的条目， 并且只支持开启关闭，不支持变更）
  initList: { type: Array, default: () => []  }, // 初始化的List集合， 会根据该list进行渲染组件
})

// 表单实例
const applyFormRef = ref()
// 表单验证规则
const applyRules = {
                    merchantType: [ ruleGenerator.requiredSelect('商户类型', 'number') ],
                    contactName: [ ruleGenerator.requiredInput('联系人姓名') ],
                    contactPhone: [ ruleGenerator.requiredInput('联系人电话'), ruleGenerator.mobile ],
                    contactEmail: [ ruleGenerator.requiredInput('联系人邮箱') ],
                    accountNo: [ ruleGenerator.requiredInput('支付宝账号') ],
                    address: [ ruleGenerator.requiredInput('店铺地址') ],
                    areaCode: [ ruleGenerator.requiredInput('省市县', 'array') ],
                    mccCode: [ ruleGenerator.requiredInput('经营类目') ],
                    licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
                    licenseImg: [ ruleGenerator.requiredInput('营业执照图片') ],
                    licenseEffectEnd: [ ruleGenerator.requiredInput('营业执照有限期'), ruleGenerator.dateOrForever ],
                    mchFullName: [ ruleGenerator.requiredInput('商户名称全称') ],
                    storeOuterImg: [ ruleGenerator.requiredInput('门头照') ],
                    storeInnerImg: [ ruleGenerator.requiredInput('店内场景照') ],
                  }
// emit： 向父组件进行通讯。 
const emit = defineEmits(['itemRender'])

// 验证所有的规则 & 提交进件资料
function saveDataPreCallback(isTempData){


 // 放置费率配置项
 let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
 if(typeof(paywayFeeList) != 'object'){
    return Promise.reject()
 }

  // 赋值到对象中
  applymentDetailInfo.paywayFeeList = paywayFeeList

    // 草稿状态直接提交 
    if(isTempData){
      return Promise.resolve()
    }

    // 验证所有表单
    return applyFormRef.value.validate().then(() => {
      return Promise.resolve()
    }).catch((params) => {
      $infoBox.message.error('数据填写不完整， 请检查后提交')
      return Promise.reject()
    })

}

// 图片识别的回调函数
function ocrScanFunc(orcObject){
  if(orcObject){
    Object.assign(applymentDetailInfo, orcObject)
  }

}

defineExpose({ saveDataPreCallback })

</script>

